*{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
a{
    text-decoration: none;
    color: black;
}
a:hover{text-decoration: underline;}
/*最顶部 */
#top_box{
    width: 100%;
    height: 30px;
    background-color: #44403f;
    font-size: 12px;
    line-height: 30px;
    position: fixed;
    z-index: 88;
    &>ul{
        width: 329px;
        height: 100%;
        display: flex;
        /* background-color: yellow; */
        justify-content: space-around;
        float: right;
        margin-right:110px;
    }
    &>.shu{
        position: absolute;
        right: 100px;
        color: gray;
    }
    &>.denglu{
        position: absolute;
        right: 30px;
    }
    a{color: white;}
    .iconfont{color: white;}
}

/* 头部 */
#header{
    top: 30px;
    height: 60px;
    width: 100%;
    border-bottom: 1px solid black;
    position: fixed;
    background-color: #fff;
    z-index: 99;
    &>#header_box{
        width: 1235px;
        height: 100%;
        margin: auto;
        line-height: 60px;
        position: relative;
        &>ul{
            width: 805px;
            height: 100%;
            display: flex;
            justify-content: start;
            float: left;
            &>li{
                margin-left: 30px;
                font-weight: 600;
                &>a{color: black;}
            }
        }
        &>img{
            width: 110px;
            height: 45px;
            float: left;
        }
        &>.shuru{
            width: 280px;
            height: 60px;
            position: absolute;
            right: 0;
            &>input{
                width: 150px;
                height: 40px;
                margin-left: 50px;
            }
            &>.icon-sousuo{
                position: absolute;
                font-size: 20px;
                right: 83px;
            }
            &>.icon-gouwuche{
                position: absolute;
                font-size: 30px;
                right: 30px;
            }
        }
    }
}
/* 二级菜单 */
#header_box ul li div{
    width: 1281px;
    height: 440px;
    background-color: white;
    position: absolute;
    left: -23px;
    display: none;
}
#header_box ul li ol{
    float: left;
    margin: 0 50px;
}
#header_box ul li > ol > li:first-child{font-weight: 600;}
#header_box ul li ol li{font-weight: 400;}
#header_box ul li > div >img{
    width: 170px;
    height: 200px;
    position: absolute;
    right: 20px;
    top: 140px;
}
#header_box ul li:hover div{
    display: block;
}
// 注册
#box{
    width: 1240px;
    height: 600px;
    margin: auto;
    // background-color: pink;
    padding-top: 91px;
    &>h1{
        width: 100%;
        text-align: center;
        height: 30px;
        font-size: 30px;
        font-weight: 600;
        line-height: 30px;
        color: #44403f;
        margin: 60px 0 ;
        border-top: 0.5px solid gray;
        padding-top: 60px;
    }
    // span{line-height: 45px;}
}
.iponeId{
    width: 410px;
    height: 45px;
    border: 0.5px solid gray;
    margin: auto;
    margin-bottom: 50px;
    // position: relative;
    input{
        width: 390px;
        height: 45px;
        margin-bottom: 25px;
        outline: none;
        border: none;
        // position: absolute;
        // left: 20px;
    }
    #msg{
        font-size: 12px;
    }
}
.verify{
    width: 410px;
    height: 45px;
    border: 0.1px solid gray;
    cursor: pointer;
    margin: auto;
    background-color: rgb(226, 223, 223);
    text-align: center;
    line-height: 45px;
    margin-bottom: 30px;
}
// .yidun{
//     width: 30px;
//     height: 30px;
//     border-radius: 50%;
//     background-color: #fff;
//     position: absolute;
//     top: 386px;
//     left: 550px;
//     z-index: 1;
// }
.yidun>.yidun_logo{
    position: absolute;
    z-index: 99;
    margin-top: 7px;
    margin-left: -8px;
    width: 15px;
    height: 17px;
    background-image: url(https://cstaticdun.126.net//2.15.2/images/icon_light.fa89a9e.png);
    background-position: 0 -132px;
    background-size: 32px 711px;
}
.yidun>.yidun_logo:hover{
    background-position: 0 -112px;
}
.yidun:hover{
    background-color: #1991fa;
}
.yidun:hover p{
    color: #1991fa;
}
.pass_word{
    width: 410px;
    height: 45px;
    border: 0.1px solid gray;
    margin: auto;
    margin-bottom: 50px;
    // position: relative;
    input{
        width: 390px;
        height: 45px;
        outline: none;
        border: none;
        // position: absolute;
        // left: 20px;
    }
    span{
        font-size: 12px;
    }
}
.verification{
    width: 410px;
    height: 45px;
    border: 0.5px solid gray;
    margin: auto;
    margin-bottom: 30px;
    position: relative;
    .yz{
        width: 240px;
        height: 45px;
        outline: none;
        border: none;
        position: absolute;
        left: 20px;
    }
    .huoqu{
        width: 130px;
        height: 45px;
        outline: none;
        border: none;
        position: absolute;
        right: 0px;
    }
}
.next{
    width: 410px;
    height: 45px;
    width: 410px;
    height: 45px;
    border: 0.5px solid gray;
    margin: auto;
    margin-bottom: 30px;
    position: relative;
    input{
        width: 410px;
        height: 45px;
        outline: none;
        border: none;
        color: white;
        font-size: 18px;
        background-color: black;
    }
}
/* 底部 */
#footer{
    width: 1240px;
    height: 338px;
    margin: auto;
    background-color: #f9f9f9;
    &>ul{
        float: left;
        margin-top: 48px;
        margin-right: 150px;
        &>li{margin: 15px 0px;}
    }
}
#footer ul:first-child{
    margin-left: 20px;
    &>a{
        font-weight: 600;
        color: #333;
        cursor: unset
    }
}
#footer li a{
    color: #767676;
    cursor: pointer;
    margin-bottom: 20px;
}
#footer .line{
    width: 1px;
    height: 150px;
    background: #ccc;
    float: left;
    margin-top: 50px;
    margin-right: 2.20588235%;
}
#footer .commit{
    width: 260px;
    height: 126px;
    float: right;
    margin-top: -180px;
    margin-right: 10px;
    // background-color: darkturquoise; 
    &>p{margin-bottom: 15px;}
    &>.iconfont{
        font-size: 35px;
        margin: 0px 20px;
    }
}
#footer .commit img:nth-of-type(1){
    width: 280px;
    margin: 40px 0px;
    position: absolute;
    right: 80px;
    background-color: #fff;
    // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    display: none;
}
#footer .commit img:nth-of-type(2){
    width: 280px;
    margin: 40px 0px;
    position: absolute;
    right: 40px;
    background-color: #fff;
    // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    display: none;
}
#footer .commit img:nth-of-type(3){
    width: 280px;
    position: absolute;
    margin: 40px 0px;
    right: 7px;
    background-color: #fff;
    // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    display: none;
}
#footer .commit span:hover img{
    display: block;
}


/* <!-- footer_bottom --> */
#footer_bottom{
    width: 100%;
    height: 60px;
    background-color: #f0f0f0;
    &>.footer_bottom_box{
        width: 1240px;
        height: 100%;
        line-height: 60px;
        margin: auto;
    }
    &>span{margin: 0 10px;}
    &>a{
        color: #767676;
        font-size: 14px;
    }
    &>img{margin: 0 20px;}
}